<template>
	<view class="resetPwd">
		<view class="resetPwd-from">
			<view class="resetPwd-logo">
				<image src="../../../static/logo.png" mode="aspectFit"></image>
			</view>
			<view class="from">
				<van-cell-group>
					<van-field
						clearable
						:border="false"
						@change="cPhone"
						use-button-slot
						placeholder="请输入您的手机号"
					></van-field>
					<van-field
						type="number"
						clearable
						:border="false"
						@change="cVerification"
						use-button-slot
						placeholder="请输入验证码"
					>
						<view class="resetPwd-from-sms" :class="{ activeSMS: ifSMS }" slot="button">
							{{ timer.text }}
						</view>
					</van-field>
					<van-field
						type="password"
						clearable
						:border="false"
						@change="cPassword"
						placeholder="新密码"
					></van-field>
					<van-field
						type="password"
						clearable
						:border="false"
						@change="cPassword2"
						placeholder="确认密码"
					></van-field>
				</van-cell-group>
			</view>
			<view class="resetPwd-btn" :class="{ active: active }">
				<van-button
					size="large"
					custom-class="resetPwd-btn-reset"
					:loading="loading"
					@click="onSubmit"
				>
					修改
				</van-button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import * as reg from '../../../common/utils/reg.js';
const md5 = require('md5');
export default {
	data() {
		return {
			loading: false,
			active: false,
			ifSMS: false,
			from: {
				phone: '',
				verification: '',
				password: '',
				password2: ''
			},
			verify: {
				phone: '手机号码格式不正确',
				verification: '验证码格式不正确',
				password: '新密码格式不正确',
				password2: '两次密码输入不同',
			},
			timer: {
				func: '',
				count: '',
				text: '发送验证码'
			} // 倒计时
		};
	},
	onLoad() {},
	methods: {
		...mapActions(['logOut']),
		onSubmit() {
			const regSubmit = reg.regSubmit(this.from);
			if (regSubmit) {
				uni.showToast({
					title: regSubmit,
					icon: 'none'
				});
				return;
			}
			if (this.loading) return;
			this.loading = true;
			this.$http
				.resetPwd({
					tel: this.from.phone,
					pwd: this.from.password,
					newpwd: this.from.password2,
					code: this.from.verification,
					type: 0
				})
				.then(e => {
					if (e.data.msg.toLowerCase() === 'ok') {
						this.logOut();
						try {
							uni.setStorageSync('td_userInfo', {});
						} catch (e) {
							// error
						}
						uni.showToast({
							title: '修改成功，请重新登录',
							icon: 'none'
						});
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/user/login/index'
							});
						}, 1000);
						return;
					}
					uni.showToast({
						title: e.data.msg,
						icon: 'none'
					});
					this.loading = false;
				});
		},
		getTime() {
			// 获取时间戳
			return new Promise((resolve, reject) => {
				this.$http
					.getTime({ tel: this.from.phone })
					.then(e => {
						console.log(e.data.data);
						const md = this.from.phone + e.data.data;
						this.serverTime = md5(md);
						resolve(this.serverTime);
					})
					.catch(err => {
						uni.showToast({
							title: '网络异常',
							icon: 'none'
						});
						this.ifSMS = false;
					});
			});
		},
		sendCode() {
			// 获取短信
			return new Promise((resolve, reject) => {
				if (this.timer.count > 0) return false;
				this.$http
					.sendCode({
						time: this.serverTime,
						tel: this.from.phone // ,md5str: this.serverTime
					})
					.then(e => {
						if (e.data.msg.toLowerCase() === 'ok') {
							uni.showToast({
								title: '发送成功',
								icon: 'none'
							});
							resolve();
							this.timer.count = 59;
							this.timer.func = setInterval(() => {
								this.timer.count--;
								this.timer.text = this.timer.count + 's';
								if (this.timer.count <= 0) {
									this.ifSMS = false
									this.timer.text = '获取验证码';
									clearInterval(this.timer.func);
								}
							}, 1000);
							return;
						}
						uni.showToast({
							title: '发送失败',
							icon: 'none'
						});
					});
			});
		},
		async getSMS() {
			// 发送短信
			const regPhone = reg.regPhone(this.from.phone);
			if (regPhone) {
				uni.showToast({
					title: regPhone,
					icon: 'none'
				});
				return;
			}
			if (this.ifSMS) return
			this.ifSMS = true
			await this.getTime({ tel: this.from.phone });
			await this.sendCode();
		},
		cPhone(e) {
			this.from.phone = e.detail;
			this.verify.phone = reg.regPhone(this.from.phone)
			this.ifVerif()
		},
		cVerification (e) {
			this.from.verification = e.detail;
			this.verify.verification = reg.regVerification(this.from.verification)
			this.ifVerif()
		},
		cPassword(e) {
			this.from.password = e.detail;
			this.verify.password = reg.regPassword(this.from.password)
			this.ifVerif()
		},
		cPassword2 (e) {
			this.from.password2 = e.detail;
			this.verify.password2 = reg.regPassword2(this.from.password, e.detail)
			this.ifVerif()
		},
		ifVerif() {
			const arr = Object.values(this.verify);
			if (arr.length >= 4) {
				for (const i of arr) {
					if (i) {
						this.active = false
						return
					}
				}
				this.active = true
			}
		}
	}
};
</script>

<style scoped lang="scss">
@import '../../../common/user.scss';
.resetPwd {
	&-logo {
		margin: 50upx auto 60upx auto;
	}
}
</style>
